<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<style type="text/css">
			html,body {
				color: #333;
			}
			.relegation-wrapper {
				height: 100%;
				box-sizing: border-box;
			}

			.serverList-content-wrapper {
			    background: #F8F8FF;
			    padding: 10px 20px 0px;
			    box-sizing: border-box;
			    position: relative;
			    padding-bottom: 130px;
			}

			.form-wrapper .from-title-wrapper {
				justify-content: flex-start;
				align-items: center;
				padding-bottom: 20px;
			}
			.form-wrapper.select  {
				padding-bottom: 0px;
			}
			.form-wrapper.select  .from-title-wrapper {
				border-bottom: 1px solid #EEEEEE;
			}
			
			.form-wrapper .from-title-wrapper .from-title {
				padding-bottom: 0px;
				border-right: 1px solid #333333;
				padding-right: 10px;
			}
			.form-wrapper.select  .from-title-wrapper .from-title {
				border-right: none;
			}

			.form-wrapper .from-title-wrapper .from-titledesc {
				padding-left: 10px;
				font-size: 14px;
				color: #777777;
			}


			.form-wrapper .config-wrapper {
				font-size: 0px;
			}

			.form-wrapper .config-wrapper .config-title {
				display: inline-block;
				color: #777777;
				width: 70px;
				font-size: 14px;
			}

			.form-wrapper .config-wrapper .config-val {
				font-size: 14px;
			}
			
			.form-wrapper  .el-table th>.cell {
				font-size: 16px;
				color: #666666;
				font-weight: normal;
				padding-top: 8px;
				padding-bottom: 10px;
			}
			.form-wrapper .el-table{
				color: #333333;
			}
			.form-wrapper .el-table::before {
				background:none;
			}
			.form-wrapper .el-table td {
				border-bottom: none;
			}
			/* 表单 */
			
			.form-wrapper .form-item .form-item-content .yzButton.normal {
			    width: 80px;
			    height: 40px;
			    color: #777777;
			}
			.form-wrapper .form-item .form-item-content .yzButton.normal.active {
			    border: 1px solid #6462F3;
			    color: #6462F3;
			    background: #EFEFFD;
			}
			
			
			.form-wrapper .form-item .el-slider__button {
			    border: none;
			    -webkit-box-shadow: 0px 0px 9px 1px rgba(99, 97, 243, 0.19);
			    box-shadow: 0px 0px 9px 1px rgba(99, 97, 243, 0.19);
			    border-radius: 10px;
			}
			
			
			.form-wrapper .form-item .el-slider__runway {
			    background-color: #fff;
			    border: solid 1px #eeeeee;
			}
			
			.form-wrapper .form-item  .el-slider__bar {
			    background-color: #6462f3;
			}
			.form-wrapper .form-item .form-item-content .content-left .el-slider__stop {
			    top: 11px;
			    position: absolute;
			    height: 6px;
			    width: 3px;
			    border-radius: 0px;
			    background-color: #6462f3;
			    /* -webkit-transform: translateX(-50%); */
			    -webkit-transform: translateX(-50%);
			    transform: translateX(-50%);
			}
			
			.form-item .form-item-content .content-right .showNum-wrapper.bw {
			    width: 120px;
			}
			
			.form-wrapper .form-item .form-item-content .content-right .showNum-wrapper{
			    height: 40px;
			    display: -webkit-box;
			    display: -ms-flexbox;
			    display: flex;
			    -webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			    justify-content: space-between;
			    padding: 0 10px;
			    -webkit-box-align: center;
			    -ms-flex-align: center;
			    align-items: center;
			    background: #FFFFFF;
			    border: 1px solid #EEEEEE;
			    -webkit-box-sizing: border-box;
			    box-sizing: border-box;
			}
			
			.form-wrapper .form-item .form-item-content .content-right {
			    width: 170px;
			    position: relative;
				display: flex;
				justify-content: flex-end;
			}
			
			.form-wrapper .form-item.haveBorder {
				border-bottom: solid 1px #efeffd;
				padding-bottom: 20px;
			}
			
			
			.price-wrapper {
			    position: fixed;
			    bottom: 0;
			    width: 100%;
			    background-color: #FFFFFF;
			    border-radius: 4px;
			    left: 0;
			    height: 105px;
			    box-shadow: 0px 0px 8px 0px rgba(100, 98, 243, 0.1);
			    box-sizing: border-box;
			    padding-left: 16%;
			    padding-right: 10%;
			    justify-content: space-between;
			    align-items: center;
			    z-index: 999;
			}
			
			.price-wrapper .content-price {
			    align-items: flex-end;
			}
			.price-wrapper .content-price .title {
			    font-size: 16px;
			}
			.price-wrapper .content-price .unit {
			    font-weight: bold;
			    color: #F0192A;
			    font-size: 24px;
			}
			.price-wrapper .content-price .price {
			    font-weight: bold;
			    color: #F0192A;
			    font-size: 32px;
			    line-height: 32px;
			}
			.price-wrapper .content-price .salePrice {
			    color: #6462F3;
			    font-size: 16px;
			    margin-left: 20px;
			}
			.price-wrapper .linear {
			    display: inline-block;
			    width: 2px;
			    height: 19px;
			    position: relative;
			    top: 0px;
			    background-color: #DDDDDD;
			    margin-left: 17px;
			    margin-right: 17px;
			}
			.yzButton.confirmxiadan {
			    color: #fff;
			    width: 168px;
			    height: 42px;
			    background: #6462F3;
			}
			
			/* 表单  end*/
			
			
			/* dialog   */
			.yz-el-dialog .dialog-content  {
				padding-top: 20px;
			}
			.yz-el-dialog .dialog-content  h5 {
				margin-top: 0px;
				font-weight: normal;
				font-size: 14px;
			}
			.yz-el-dialog .dialog-content .config-item {
				box-sizing: border-box;
				height: 40px;
				border: 1px solid #EEEEEE;
				padding: 0  10px;
				display: flex;
				align-items: center;
				margin-bottom: 10px;
				position: relative;
			}
			.yz-el-dialog .dialog-content .config-item .item-key {
				width: 90px;
			}
			
			.yz-el-dialog .dialog-content .config-item .item-flag {
				position: absolute;
				width: 11px;
				height: 18px;
				right: 10px;
				top: 0px;
				bottom: 0px;
				margin: auto;
			}
			
			.yz-el-dialog .dialog-content .config-item .item-flag.upgrade {
				background: url(img/upgrade.png) no-repeat center;
			}
			.yz-el-dialog .dialog-content .config-item .item-flag.demotion {
				background: url(img/downgrade.png) no-repeat center;
			}
			
			.yz-el-dialog .dialog-button-wrapper .yzButton.confirm {
				width: auto;
				padding-left: 24px;
				padding-right: 24px;
			}
			
			.dialog-content .dialog-content-desc {
			    height: 40px;
			    background: #F3F3FF;
			    border: 1px solid #AEABFF;
			    border-radius: 4px;
			    color: #6462F3;
			    display: flex;
			    align-items: center;
			    padding-left: 20px;
				margin-bottom: 30px;
			}
			.dialog-content .dialog-content-infowrapper {
				margin-bottom: 40px;
			}
			
			/* dialog end */
		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="relegation-wrapper section" v-cloak>
			<div class="serverList-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">云服务器CVM</span>
					<span class="nav-item">实例自定义/系统名称</span>
					<span class="nav-item">升降级配置</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper fboxRow">
						<span class="from-title">升降配置</span>
						<span class="from-titledesc">您将要升降级1个实例</span>
					</div>
					<el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="产品类型" width="auto">
							<template slot-scope="scope">
								{{scope.row.name}}
							</template>

						</el-table-column>
						<el-table-column label="ID" width="auto">
							<template slot-scope="scope">
								{{scope.row.id}}
							</template>
						
						</el-table-column>


						<el-table-column label="产品配置" width="400">
							<template slot-scope="scope">
								<el-row>
									<el-col :span="8">
										<div class="config-wrapper">
											<span class="config-title">地域：</span> 
											<span class="config-val">{{scope.row.area}}</span>
										</div>
									</el-col>
									<el-col :span="16">
										<div class="config-wrapper">
											<span class="config-title">IP数：</span> 
											<span class="config-val">{{scope.row.ipnum}}个</span>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="config-wrapper">
											<span class="config-title">CPU：</span> 
											<span class="config-val">{{scope.row.cpu}}核</span>
										</div>
									</el-col>
									<el-col :span="16">
										<div class="config-wrapper">
											<span class="config-title">数据盘：</span> 
											<span class="config-val">{{scope.row.dataDisk}}G</span>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="config-wrapper">
											<span class="config-title">内存：</span> 
											<span class="config-val">{{scope.row.memory}}G</span>
										</div>
									</el-col>
									<el-col :span="16">
										<div class="config-wrapper">
											<span class="config-title">带宽：</span> 
											<span class="config-val">{{scope.row.bindwith}}M</span>
										</div>
									</el-col>
									<el-col :span="8">
										<div class="config-wrapper">
											<span class="config-title">SSD：</span> 
											<span class="config-val">{{scope.row.ssd}}G</span>
										</div>
									</el-col>
									<el-col :span="16">
										<div class="config-wrapper">
											<span class="config-title">操作系统：</span> 
											<span class="config-val">{{scope.row.imageSystem}}</span>
										</div>
									</el-col>
									
									
								</el-row>
							</template>
						</el-table-column>


						<el-table-column label="到期时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.dueTime}}
							</template>
						</el-table-column>

						<el-table-column width="auto" label="付费类型">
							<template slot-scope="scope">
								{{scope.row.payMoneyType}}
							</template>
						</el-table-column>


					</el-table>

				</div>
				<div class="form-wrapper select">
					<div class="from-title-wrapper fboxRow">
						<span class="from-title">配置选择</span>
					</div>
					<el-form :rules="rules" label-position="left" class="form-wrapper" ref="form" :model="form" label-width="133px">
					  <el-form-item class="form-item cpu" label="CPU">
					    <div class="form-item-content fboxRow">
					      <div @click="handleClickChangeCpu(item)" :class="{'active':item.relid === activeCpuId}" v-for="(item,index) in cpuOptions"
					        :key="item.relid" class="yzButton normal mr-20">{{item.optionname_num}}核</div>
					    </div>
					  </el-form-item>
					  <el-form-item class="form-item haveBorder" label="内存">
					    <div class="form-item-content fboxRow">
					      <div @click="activeRamId = item.relid" :class="{'active':item.relid === activeRamId}" v-for="(item,index) in childramOptions"
					        :key="item.relid" class="yzButton normal mr-20">{{item.optionname_num / 1024}}G</div>
					    </div>
					  </el-form-item>
					  <el-form-item style="padding-bottom: 40px;" class="form-item haveBorder" label="带宽">
					    <div class="form-item-content fboxRow">
					      <el-row class="wt100">
					        <el-col :span="18">
					          <div class="content-left">
					            <el-slider :step="bwStep" :format-tooltip="formatTooltip" :min="bwStep" :max="maxBwNum" v-model="bwNum"
					              :marks="bwMraks">
					            </el-slider>
					          </div>
					        </el-col>
					        <el-col :span="6">
					          <div class="content-right">
					            <div class="showNum-wrapper bw">
					              <span>{{handleBwNum()}}</span>
					              <span class="unit">Mbps</span>
					            </div>
					
					          </div>
					
					        </el-col>
					      </el-row>
					    </div>
					  </el-form-item>
					  <el-form-item class="form-item" label="公网IP">
					    <div class="form-item-content fboxRow">
					      <div @click="activeIpId = item.relid" :class="{'active':item.relid === activeIpId}" v-for="(item,index) in ipOptions"
					        :key="item.relid" class="yzButton normal mr-20">{{item.optionname}}个</div>
					    </div>
					  </el-form-item>
					</el-form>
				</div>
				<div class="zanwei-wrapper"></div>
				<div class="price-wrapper fboxRow">
								<div class="price-wrapper-content">
									<div class="content-price fboxRow">
										<span class="title">实际支付：</span>
										<span class="unit">¥</span>
										<span class="price">{{handlePayActual()}}</span>
				<!-- 						<span class="salePrice">(已省¥{{salePrice}})</span>
										<i class="linear"></i>
										<div class="popover-wrapper">
											<el-popover placement="bottom" width="300" trigger="hover" >
												<div class="title-wrapper-pop fboxRow">
													<span class="title-pop">优惠详情 (共省¥{{salePrice}}) </span>
												</div>
												<div class="saleInfo-wrapper">
													<div v-for="(item,index) in saleInfoGroup" :key="index" class="saleInfo-item">
														<span class="item-title">{{item.title}}</span>
														<span class="item-desc">省：¥{{item.price}}</span>
													</div>
												</div>
												<div slot="reference" >
													<p style="cursor: pointer;color: #FF9416;">优惠详情<i style="color: #FF9416;margin-left: 5px;" class="icon el-icon-arrow-up"></i></p>
												</div>
											</el-popover>
										</div> -->
							
										
									</div>
										
								</div>
								<div class="fboxRow">
				<!-- 					<div class="content-checkbox fboxCenter mr-10">
										 <el-checkbox class="mr-10" v-model="statementChecked"></el-checkbox><span class="text">我已经阅读并同意</span><span class="statement">《衡天云免责声明》</span>
									</div> -->
									<div @click="handleClickConfirmxiadan" class="yzButton confirmxiadan">提交</div>
								</div>
							</div>
			</div>

			<el-dialog style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="dialogVisble">
				<div slot="title" class="dialog-title">
					配置确认
				</div>
				<div class="dialog-content">
					<div v-if="handleShowdialogDesc()" class="dialog-content-desc">
						注：您正在做产品降级处理，点击确认将自动支付降级订单，降级的金额将不做任何退费处理，请您慎重
					</div>
					<div class="dialog-content-infowrapper mb-20">
						<h5>配置升降级详情</h5>
						<el-row :gutter="20">
							<el-col :span="12">
								<div class="config-item">
									<span class="item-key">CPU:</span>
									<span class="item-val" v-html="getOrderConfigInfo('cpu')"></span>
									<i v-if="activeCpuId !== oldConfigInfo.activeCpuId" class="item-flag" :class="getArrowStyle('cpu')"></i>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="config-item">
									<span class="item-key">内存:</span>
									<span class="item-val" v-html="getOrderConfigInfo('memory')"></span>
									<i v-if="activeRamId !== oldConfigInfo.activeRamId" class="item-flag" :class="getArrowStyle('memory')"></i>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="config-item">
									<span class="item-key">带宽:</span>
									<span class="item-val" v-html="getOrderConfigInfo('bw')"></span>
									<i v-if="bwNum !== oldConfigInfo.bwNum" class="item-flag" :class="getArrowStyle('bw')"></i>
								</div>
							</el-col>
							<el-col :span="12">
								<div class="config-item">
									<span class="item-key">公网IP：</span>
									<span class="item-val">1个</span>
								</div>
							</el-col>
						</el-row>
					</div>
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmSubmitOrder" class="yzButton  confirm">已了解，确认下单</div>
						<div @click="dialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.relegation-wrapper',
				data: function() {
					return {
						gapPrice: undefined, // 实际差价
						dialogVisble: false,  // 弹窗是否显示
						oldConfigInfo: {  // 原始配置信息
							activeCpuId: undefined, // 选中的cpuid
							activeRamId: undefined, // 选中的内存id
							activeIpId:undefined, // 选中的ip id
							cpuOptions: [], // cpu 可配置选项
							ramOptions: [], // 内存可选配置选项
							ipOptions:[], // 公网ip 可配置选项
							childramOptions:[] , // 在当前选中cpu下面 可选的内存
							bwMraks: {   //带宽标记值 对象
							
							},
							bwNum: undefined, // 带宽数值
							bwOptions:[]
						}, 
						
						tableData: [{
							id: 1123,
							name: '实例名称下单自动生成',
							area: '香港',
							ipnum: 1,
							cpu: 1,
							dataDisk: 100, // 数据盘
							memory: 1, // 内存 1G
							bindwith: 100, // 带宽 
							ssd: 50,
							imageSystem: 'Centons 1.0',
							useBindwith: 100, // 使用带宽
							dueTime: '2020-10-2',
							payMoneyType: '包年/包月',
							periodtime:'monthly'  // 购买周期  价格计算也与该字段值有关
						}],
						rules: { // 表单规则验证
							
						},
						activeCpuId: undefined, // 选中的cpuid
						activeRamId: undefined, // 选中的内存id
						activeIpId:undefined, // 选中的ip id
						cpuOptions: [], // cpu 可配置选项
						ramOptions: [], // 内存可选配置选项
						bwOptions:[], // 带宽可选配置项
						ipOptions:[], // 公网ip 可配置选项
						childramOptions:[] , // 在当前选中cpu下面 可选的内存
						type: undefined, // 产品类型
						bwStep: undefined, // 带宽间距
						bwMraks: {   //带宽标记值 对象
						
						},
						bwNum: undefined, // 带宽数值
						maxBwNum: undefined, //最大带宽
						
						form: {
							areaActiveId: 0, // 区域activeId
							cpuActiveId: 0, // cpu activeId
							rawActiveId: 0, // 内存 activeId
							imageActiveId: 0, // 镜像组 activeId
							defenseActiveId: 0, // 防御 activeId
						  imageType: 0, //0  系统  1 应用
						  serverNum: 1,
						  loginPassword: '',
						  confirmPassword: '',
						  passwordSettingType: 1, // 登录密码设置方式 0 自动设置密码 ； 1  随机生成
						  sliderValue: 0,
						  maxDiskNum: 3, // 最大数据盘数目
						  sliderDataGroup: [], // 数据盘数组
						  marks: {
						    20: '20Mbps',
						    40: '40Mbps',
						    60: '60Mbps',
						    80: '80Mbps',
						    99: '100Mbps'
						  },
						
						
						  num: 1,

						  buyTimeActive: 'monthly', // buytime activeId  默认为月付
						  comboActiveId: 0, // 套餐选配 activeId
						  comboGroup: [{
						    comboId: 0,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 1,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 2,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 3,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 4,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 5,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    comboId: 6,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }, {
						    combo: 7,
						    cpu: 1,
						    raw: 1,
						    ssd: 50
						  }],
						
						  defenseGroup: [{
						    name: '10G',
						    defenseId: 0
						  }, {
						    name: '20G',
						    defenseId: 1
						  }, {
						    name: '50G',
						    defenseId: 2
						  }, {
						    name: '100G',
						    defenseId: 3
						  }, {
						    name: '200G',
						    defenseId: 4
						  }, {
						    name: '300G',
						    defenseId: 5
						  }],
						  buyTimeGroup: [{
						    name: '1个月',
						    value: 'monthly',
						    haveSale: false,
						    SaleNum: undefined
						  }, {
						    name: '3个月',
						    value: 'quarterly',
						    haveSale: false,
						    SaleNum: undefined
						  }, {
						    name: '6个月',
						    value: 'semiannually',
						    haveSale: false,
						    SaleNum: undefined
						  }, {
						    name: '1年',
						    value: 'annually',
						    haveSale: true,
						    SaleNum: 2
						  }, {
						    name: '2年',
						    value: 'biennially',
						    haveSale: true,
						    SaleNum: 4
						  }, {
						    name: '3年',
						    value: 'triennially',
						    haveSale: true,
						    SaleNum: 6
						  }],
						
						  cpuGroup: [{
						    name: '1核',
						    cpuId: 0
						  }, {
						    name: '2核',
						    cpuId: 1
						  }, {
						    name: '4核',
						    cpuId: 2
						  }, {
						    name: '8核',
						    cpuId: 3
						  }, {
						    name: '16核',
						    cpuId: 4
						  }],
						  rawGroup: [{
						    name: '1G',
						    rawId: 0
						  }, {
						    name: '2G',
						    rawId: 1
						  }, {
						    name: '4G',
						    rawId: 2
						  }, {
						    name: '8G',
						    rawId: 3
						  }, {
						    name: '16G',
						    rawId: 4
						  }],
						
						  name: '',
						  region: '',
						  date1: '',
						  date2: '',
						  delivery: false,
						  type: [],
						  resource: '',
						  desc: '',
						}
					}
				},

				methods: {
					
					// 获取订单配置 箭头样式
					getArrowStyle: function(key) {
						let that = this
						if(key === 'cpu') {
							let cpuName
							
							this.cpuOptions.forEach(function(item){
								if(item.relid === that.activeCpuId) {
									cpuName = item.optionname_num
								}
							})
							
							if(this.activeCpuId !== this.oldConfigInfo.activeCpuId) {
								// 获取原始cpu
								let oldcpuName
								
								this.oldConfigInfo.cpuOptions.forEach(function(item){
									if(item.relid === that.oldConfigInfo.activeCpuId) {
										oldcpuName = item.optionname_num
									}
								})
								
								if(Number(oldcpuName) > Number(cpuName)) {
									// 降级
									return  'demotion'
								}else {
									// 升级
									return 'upgrade' 
								}
								
								
							}
						}else if(key === 'memory') {
							let memoryName
							
							this.ramOptions.forEach(function(item){
								if(item.relid === that.activeRamId) {
									memoryName = item.optionname_num / 1024
								}
							})
							
							if(this.activeRamId !== this.oldConfigInfo.activeRamId) {
								// 获取原始cpu
								let oldmemoryName
								
								this.oldConfigInfo.ramOptions.forEach(function(item){
									if(item.relid === that.oldConfigInfo.activeRamId) {
										oldmemoryName = item.optionname_num /1024
									}
								})
								
								if(Number(oldmemoryName) > Number(memoryName)) {
									// 降级
									return  'demotion'
								}else {
									// 升级
									return 'upgrade' 
								}
								
								
							}
						}else if(key === 'bw') {
							let bwName
							let oldbwName 
							
							let bwKeysArr = Object.keys(that.bwMraks)
							bwKeysArr.forEach(function(item) {
								if(Number(that.bwNum).toFixed(11) === Number(item).toFixed(11)) {
									bwName =  that.bwMraks[item]
								}
							})
							
							let oldbwKeysArr = Object.keys(that.oldConfigInfo.bwMraks)
							oldbwKeysArr.forEach(function(item) {
								if(Number(that.oldConfigInfo.bwNum).toFixed(11) === Number(item).toFixed(11)) {
									oldbwName =  that.oldConfigInfo.bwMraks[item]
								}
							})
							if(Number(oldbwName) !== Number(bwName)) {
								if(Number(oldbwName) > Number(bwName)) {
									// 降级
									return  'demotion'
								}else {
									// 升级
									return 'upgrade' 
								}
							}

							
						}
					},
					
					// 获取订单配置
					getOrderConfigInfo: function(key) {
						let that = this
						if(key === 'cpu') {
							let cpuName
							
							this.cpuOptions.forEach(function(item){
								if(item.relid === that.activeCpuId) {
									cpuName = item.optionname_num
								}
							})
							
							if(this.activeCpuId !== this.oldConfigInfo.activeCpuId) {
								// 获取原始cpu
								let oldcpuName
								
								this.oldConfigInfo.cpuOptions.forEach(function(item){
									if(item.relid === that.oldConfigInfo.activeCpuId) {
										oldcpuName = item.optionname_num
									}
								})
								
								if(Number(oldcpuName) > Number(cpuName)) {
									// 降级
									return  '<span style="color:#FF9B3F">' + cpuName +  '核</span> (原' + oldcpuName +'核)'
								}else {
									// 升级
									return  '<span style="color:#6462F3">' + cpuName +  '核</span> (原' + oldcpuName +'核)'
								}
								
								
							}
							return cpuName + '核'
						}
						
						else if(key === 'memory') {
							let memoryName
							
							this.ramOptions.forEach(function(item){
								if(item.relid === that.activeRamId) {
									memoryName = item.optionname_num / 1024
								}
							})
							
							if(this.activeRamId !== this.oldConfigInfo.activeRamId) {
								// 获取原始cpu
								let oldmemoryName
								
								this.oldConfigInfo.ramOptions.forEach(function(item){
									if(item.relid === that.oldConfigInfo.activeRamId) {
										oldmemoryName = item.optionname_num /1024
									}
								})
								
								if(Number(oldmemoryName) > Number(memoryName)) {
									// 降级
									return  '<span style="color:#FF9B3F">' + memoryName +  'G</span> (原' + oldmemoryName +'G)'
								}else {
									// 升级
									return  '<span style="color:#6462F3">' + memoryName +  'G</span> (原' + oldmemoryName +'G)'
								}
								
								
							}
							return memoryName + 'G'
						}else if(key === 'bw') {
							let bwName
							let oldbwName 
							
							let bwKeysArr = Object.keys(that.bwMraks)
							bwKeysArr.forEach(function(item) {
								if(Number(that.bwNum).toFixed(11) === Number(item).toFixed(11)) {
									bwName =  that.bwMraks[item]
								}
							})
							
							let oldbwKeysArr = Object.keys(that.oldConfigInfo.bwMraks)
							oldbwKeysArr.forEach(function(item) {
								if(Number(that.oldConfigInfo.bwNum).toFixed(11) === Number(item).toFixed(11)) {
									oldbwName =  that.oldConfigInfo.bwMraks[item]
								}
							})
							if(Number(oldbwName) !== Number(bwName)) {
								if(Number(oldbwName) > Number(bwName)) {
									// 降级
									return  '<span style="color:#FF9B3F">' + bwName +  'Mbps</span> (原' + oldbwName +'Mbps)'
								}else {
									// 升级
									return  '<span style="color:#6462F3">' + bwName +  'Mbps</span> (原' + oldbwName +'Mbps)'
								}
							}

							
							return bwName + 'Mbps'
						}
					},
					
					// 确认提交订单
					confirmSubmitOrder:function() {
						this.dialogVisble =  false
						console.log('跳转到订单页面')
					},
					
					// 根据周期处理价格
					handlePriceByTime:function(item) {
						let time = this.tableData[0].periodtime
						return item[time]
					},
					
					// 计算现在配置价格
					getNewConfigPrice: function() {
						
							let that = this
							//原始配置 cpu价格
							let cpuPrice
							that.cpuOptions.forEach(function(item) {
								
								if(item.relid === that.activeCpuId) {
									cpuPrice =  that.handlePriceByTime(item)
								}
							})
							
							//原始配置 内存价格
							let memoryPrice
							that.childramOptions.forEach(function(item) {
								
								if(item.relid === that.activeRamId) {
									memoryPrice =  that.handlePriceByTime(item)
								}
							})
							
							// 原始配置  带宽价格
							let bindwithOptionName
							let bindwithPrice
							let bwKeysArr = Object.keys(that.bwMraks)
							bwKeysArr.forEach(function(item) {
								if(Number(that.bwNum).toFixed(11) === Number(item).toFixed(11)) {
									bindwithOptionName =  that.bwMraks[item]
								}
							})
							
							that.bwOptions.forEach(function(item) {
								if(bindwithOptionName.toString() === item.optionname_num) {
									bindwithPrice =  that.handlePriceByTime(item)
								}
							})
							
							
							
							
							// 原始配置  ip价格  暂未处理
							
							return cpuPrice + memoryPrice + bindwithPrice
						
					},
					
					// 处理是否显示降级说明
					handleShowdialogDesc: function() {
						let price = Number(this.gapPrice) 
						let show =  price < 0 ? true : false
						console.log(price,show)
						return show
					},
					
					
					// 计算原始配置价格
					getOldConfigPrice:function() {
						let that = this
						//原始配置 cpu价格
						let cpuPrice
						that.oldConfigInfo.cpuOptions.forEach(function(item) {
							
							if(item.relid === that.oldConfigInfo.activeCpuId) {
								cpuPrice =  that.handlePriceByTime(item)
							}
						})
						
						//原始配置 内存价格
						let memoryPrice
						that.oldConfigInfo.childramOptions.forEach(function(item) {
							
							if(item.relid === that.oldConfigInfo.activeRamId) {
								memoryPrice =  that.handlePriceByTime(item)
							}
						})
						
						// 原始配置  带宽价格
						let bindwithOptionName
						let bindwithPrice
						let bwKeysArr = Object.keys(that.oldConfigInfo.bwMraks)
						bwKeysArr.forEach(function(item) {
							if(Number(that.oldConfigInfo.bwNum).toFixed(11) === Number(item).toFixed(11)) {
								bindwithOptionName =  that.oldConfigInfo.bwMraks[item]
							}
						})
						
						that.oldConfigInfo.bwOptions.forEach(function(item) {
							if(bindwithOptionName.toString() === item.optionname_num) {
								bindwithPrice =  that.handlePriceByTime(item)
							}
						})
						
						
						
						// 原始配置  ip价格  暂未处理
						
						return cpuPrice + memoryPrice + bindwithPrice
					},
					
					// 点击确认下单
					handleClickConfirmxiadan:_throttle(function(){
						this.dialogVisble =  true
					}),
					// 处理实际支付价格
					handlePayActual: function() {
						let oldprice = this.getOldConfigPrice()
						let newPrice = this.getNewConfigPrice()
						this.gapPrice = newPrice - oldprice
						let  gap = newPrice - oldprice < 0 ? 0 : newPrice - oldprice
						return gap.toFixed(2)
					},
					
					// 处理选中带宽提示值
					formatTooltip:function(val) {
					  if(val !== null) {
					    let roundval = val.toFixed(11)
					
					    let keysArr = Object.keys(this.bwMraks)
					    let tip
					    keysArr.forEach((item) => {
					      let rounditem = Number(item).toFixed(11)
					      if (rounditem === roundval) {
					        tip = this.bwMraks[item]
					      }
					    })
					
					    return tip + 'Mbps'
					  }
					},
					
					 //  获取配置信息
					getConfigInfo:function() {
						// 这里为了显示数据 直接赋测试值   实际应该后台返回
						let data
						let that = this
						data = {
							"config_node": {
								"id": "44",
								"gid": "27",
								"optionname": "\u8282\u70b9",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "0",
								"hidden": "0",
								"sub": [{
									"configid": "44",
									"optionname_num": "1",
									"optionname": "\u4e8c\u533a",
									"relid": "265",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}]
							},
							"config_cpu": {
								"id": "47",
								"gid": "27",
								"optionname": "CPU",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "3",
								"hidden": "0",
								"sub": [{
									"configid": "47",
									"optionname_num": "1",
									"optionname": "1\u6838\u5fc3",
									"relid": "199",
									"monthly": 16,
									"quarterly": 48,
									"semiannually": 96,
									"annually": 160,
									"biennially": 320,
									"triennially": 416
								}, {
									"configid": "47",
									"optionname_num": "2",
									"optionname": "2\u6838\u5fc3",
									"relid": "200",
									"monthly": 60.8,
									"quarterly": 182.4,
									"semiannually": 364.8,
									"annually": 608,
									"biennially": 1094.4,
									"triennially": 1580.8
								}, {
									"configid": "47",
									"optionname_num": "4",
									"optionname": "4\u6838\u5fc3",
									"relid": "201",
									"monthly": 116,
									"quarterly": 348,
									"semiannually": 696,
									"annually": 1160,
									"biennially": 2088,
									"triennially": 3016
								}, {
									"configid": "47",
									"optionname_num": "8",
									"optionname": "8\u6838\u5fc3",
									"relid": "202",
									"monthly": 252,
									"quarterly": 756,
									"semiannually": 1512,
									"annually": 2520,
									"biennially": 4536,
									"triennially": 6552
								}, {
									"configid": "47",
									"optionname_num": "16",
									"optionname": "16\u6838\u5fc3",
									"relid": "203",
									"monthly": 576,
									"quarterly": 1728,
									"semiannually": 3456,
									"annually": 5760,
									"biennially": 10368,
									"triennially": 14976
								}]
							},
							"config_ram": {
								"id": "48",
								"gid": "27",
								"optionname": "\u5185\u5b58",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "4",
								"hidden": "0",
								"sub": [{
									"configid": "48",
									"optionname_num": "1024",
									"optionname": "1GB",
									"relid": "204",
									"monthly": 14.4,
									"quarterly": 43.2,
									"semiannually": 86.4,
									"annually": 144,
									"biennially": 259.2,
									"triennially": 366.4
								}, {
									"configid": "48",
									"optionname_num": "2048",
									"optionname": "2GB",
									"relid": "205",
									"monthly": 44.8,
									"quarterly": 134.4,
									"semiannually": 268.8,
									"annually": 448,
									"biennially": 806.4,
									"triennially": 1164.8
								}, {
									"configid": "48",
									"optionname_num": "4096",
									"optionname": "4GB",
									"relid": "206",
									"monthly": 112,
									"quarterly": 336,
									"semiannually": 672,
									"annually": 1120,
									"biennially": 2016,
									"triennially": 2912
								}, {
									"configid": "48",
									"optionname_num": "8192",
									"optionname": "8GB",
									"relid": "207",
									"monthly": 198.4,
									"quarterly": 595.2,
									"semiannually": 1190.4,
									"annually": 1984,
									"biennially": 3571.2,
									"triennially": 5158.4
								}, {
									"configid": "48",
									"optionname_num": "16384",
									"optionname": "16GB",
									"relid": "208",
									"monthly": 401.6,
									"quarterly": 1204.8,
									"semiannually": 2409.6,
									"annually": 4016,
									"biennially": 7228.8,
									"triennially": 10441.6
								}, {
									"configid": "48",
									"optionname_num": "32768",
									"optionname": "32GB",
									"relid": "209",
									"monthly": 864,
									"quarterly": 2592,
									"semiannually": 5184,
									"annually": 8640,
									"biennially": 15552,
									"triennially": 22464
								}, {
									"configid": "48",
									"optionname_num": "65536",
									"optionname": "64GB",
									"relid": "210",
									"monthly": 1433.6,
									"quarterly": 4300.8,
									"semiannually": 8601.6,
									"annually": 14336,
									"biennially": 25804.8,
									"triennially": 37273.6
								}]
							},
							"config_os": {
								"id": "49",
								"gid": "27",
								"optionname": "\u7cfb\u7edf\u955c\u50cf",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "5",
								"hidden": "0",
								"sub": [{
									"configid": "49",
									"optionname_num": "centos-5.5-x86",
									"optionname": "Linux CentOS 5.5 32bit",
									"relid": "211",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-5.5-x86-64",
									"optionname": "Linux CentOS 5.5 64bit",
									"relid": "212",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-5.6-x86",
									"optionname": "Linux CentOS 5.6 32bit",
									"relid": "213",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-5.6-x86-64",
									"optionname": "Linux CentOS 5.6 64bit",
									"relid": "214",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.5-x86",
									"optionname": "Linux CentOS 6.5 32bit",
									"relid": "215",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.5-x86-64",
									"optionname": "Linux CentOS 6.5 64bit",
									"relid": "216",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.7-x86",
									"optionname": "Linux CentOS 6.7 32bit",
									"relid": "217",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.7-x86-64",
									"optionname": "Linux CentOS 6.7 64bit",
									"relid": "218",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.8-x86",
									"optionname": "Linux CentOS 6.8 32bit",
									"relid": "219",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-6.8-x86-64",
									"optionname": "Linux CentOS 6.8 64bit",
									"relid": "220",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "ubuntu-14.04-server-x86-64",
									"optionname": "Linux Ubuntu 14.04 64bit",
									"relid": "224",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "ubuntu-16.04-server-x86-64",
									"optionname": "Linux Ubuntu 16.04 64bit",
									"relid": "225",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-server-2003-r2-enterprise-sp2-x86-64-cn",
									"optionname": "Windows 2003 R2 Enterprise-SP2-64bit(cn)",
									"relid": "227",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-server-2003-r2-enterprise-sp2-x86-cn",
									"optionname": "Windows 2003 R2 Enterprise-SP2-32bit(cn)",
									"relid": "228",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-server-2008-r2-enterprise-sp1-x86-64-cn",
									"optionname": "Windows 2008 R2 Enterprise-SP1-64bit(cn)",
									"relid": "229",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-server_2012_r2_datacenter-x86-64-cn",
									"optionname": "Windows 2012 R2 DataCenter-64bit(cn)",
									"relid": "230",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-7.6.1810-x86-64",
									"optionname": "Linux CentOS 7.6.1810 64bit",
									"relid": "266",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-7-64bit-cn",
									"optionname": "Windows 7 64bit(cn)",
									"relid": "342",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "windows-10-64bit-cn",
									"optionname": "Windows 10 64bit(cn)",
									"relid": "343",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-7.3.1611-x86-64",
									"optionname": "Linux CentOS 7.3.1611 64bit",
									"relid": "344",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-7.7.1908-x86-64",
									"optionname": "Linux CentOS 7.7.1908 64bit",
									"relid": "345",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "centos-8.0.1905-x86-64",
									"optionname": "Linux Centos 8.0.1905 64bit",
									"relid": "346",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "ubuntu-18.04-server-x86-64",
									"optionname": "Linux Ubuntu 18.04 x86-64",
									"relid": "347",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "49",
									"optionname_num": "debian-9.0-x86-64",
									"optionname": "Linux Debian 9.12.0 AMD64",
									"relid": "348",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}]
							},
							"config_disk1": {
								"id": "51",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-\u9ad8\u6548\u4e91\u76d81",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "7",
								"hidden": "0",
								"sub": [{
									"configid": "51",
									"optionname": "1GB",
									"relid": "233",
									"monthly": 0.4,
									"quarterly": 1.2,
									"semiannually": 2.4,
									"annually": 4,
									"biennially": 7.2,
									"triennially": 10.4
								}]
							},
							"config_disk2": {
								"id": "52",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-\u9ad8\u6548\u4e91\u76d82",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "8",
								"hidden": "0",
								"sub": [{
									"configid": "52",
									"optionname": "1GB",
									"relid": "234",
									"monthly": 0.5,
									"quarterly": 1.5,
									"semiannually": 3,
									"annually": 5,
									"biennially": 9,
									"triennially": 13
								}]
							},
							"config_disk3": {
								"id": "53",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-\u9ad8\u6548\u4e91\u76d83",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "9",
								"hidden": "0",
								"sub": [{
									"configid": "53",
									"optionname": "1GB",
									"relid": "235",
									"monthly": 0.5,
									"quarterly": 1.5,
									"semiannually": 3,
									"annually": 5,
									"biennially": 9,
									"triennially": 13
								}]
							},
							"config_disk4": {
								"id": "167",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-SSD\u4e91\u76d81",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "10",
								"hidden": "0",
								"sub": [{
									"configid": "167",
									"optionname": "1GB",
									"relid": "842",
									"monthly": 1,
									"quarterly": 3,
									"semiannually": 6,
									"annually": 10,
									"biennially": 20,
									"triennially": 30
								}]
							},
							"config_disk5": {
								"id": "168",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-SSD\u4e91\u76d82",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "11",
								"hidden": "0",
								"sub": [{
									"configid": "168",
									"optionname": "1GB",
									"relid": "843",
									"monthly": 1,
									"quarterly": 3,
									"semiannually": 6,
									"annually": 10,
									"biennially": 20,
									"triennially": 30
								}]
							},
							"config_disk6": {
								"id": "169",
								"gid": "27",
								"optionname": "\u6570\u636e\u76d8-SSD\u4e91\u76d83",
								"optiontype": "4",
								"qtyminimum": "0",
								"qtymaximum": "1024",
								"order": "12",
								"hidden": "0",
								"sub": [{
									"configid": "169",
									"optionname": "1GB",
									"relid": "844",
									"monthly": 1,
									"quarterly": 3,
									"semiannually": 6,
									"annually": 10,
									"biennially": 20,
									"triennially": 30
								}]
							},
							"config_bw": {
								"id": "54",
								"gid": "27",
								"optionname": "\u5e26\u5bbd",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "13",
								"hidden": "0",
								"sub": [{
									"configid": "54",
									"optionname_num": "1",
									"optionname": "1M",
									"relid": "236",
									"monthly": 8,
									"quarterly": 24,
									"semiannually": 48,
									"annually": 80,
									"biennially": 144,
									"triennially": 208
								}, {
									"configid": "54",
									"optionname_num": "2",
									"optionname": "2M",
									"relid": "237",
									"monthly": 24,
									"quarterly": 72,
									"semiannually": 144,
									"annually": 240,
									"biennially": 432,
									"triennially": 624
								}, {
									"configid": "54",
									"optionname_num": "3",
									"optionname": "3M",
									"relid": "238",
									"monthly": 52,
									"quarterly": 156,
									"semiannually": 312,
									"annually": 520,
									"biennially": 936,
									"triennially": 1352
								}, {
									"configid": "54",
									"optionname_num": "4",
									"optionname": "4M",
									"relid": "239",
									"monthly": 76,
									"quarterly": 228,
									"semiannually": 456,
									"annually": 760,
									"biennially": 1368,
									"triennially": 1976
								}, {
									"configid": "54",
									"optionname_num": "5",
									"optionname": "5M",
									"relid": "240",
									"monthly": 100,
									"quarterly": 300,
									"semiannually": 600,
									"annually": 1000,
									"biennially": 1800,
									"triennially": 2600
								}, {
									"configid": "54",
									"optionname_num": "6",
									"optionname": "6M",
									"relid": "241",
									"monthly": 180,
									"quarterly": 540,
									"semiannually": 1080,
									"annually": 1800,
									"biennially": 3240,
									"triennially": 4680
								}, {
									"configid": "54",
									"optionname_num": "7",
									"optionname": "7M",
									"relid": "242",
									"monthly": 260,
									"quarterly": 780,
									"semiannually": 1560,
									"annually": 2600,
									"biennially": 4680,
									"triennially": 6760
								}, {
									"configid": "54",
									"optionname_num": "8",
									"optionname": "8M",
									"relid": "243",
									"monthly": 340,
									"quarterly": 1020,
									"semiannually": 2040,
									"annually": 3400,
									"biennially": 6120,
									"triennially": 9204
								}, {
									"configid": "54",
									"optionname_num": "9",
									"optionname": "9M",
									"relid": "244",
									"monthly": 420,
									"quarterly": 1260,
									"semiannually": 2520,
									"annually": 4200,
									"biennially": 7560,
									"triennially": 10920
								}, {
									"configid": "54",
									"optionname_num": "10",
									"optionname": "10M",
									"relid": "245",
									"monthly": 500,
									"quarterly": 1500,
									"semiannually": 3000,
									"annually": 5000,
									"biennially": 9000,
									"triennially": 13000
								}, {
									"configid": "54",
									"optionname_num": "15",
									"optionname": "15M",
									"relid": "246",
									"monthly": 1700,
									"quarterly": 5100,
									"semiannually": 10200,
									"annually": 17000,
									"biennially": 30600,
									"triennially": 44200
								}, {
									"configid": "54",
									"optionname_num": "20",
									"optionname": "20M",
									"relid": "247",
									"monthly": 2900,
									"quarterly": 8700,
									"semiannually": 17400,
									"annually": 29000,
									"biennially": 53000,
									"triennially": 75400
								}, {
									"configid": "54",
									"optionname_num": "30",
									"optionname": "30M",
									"relid": "248",
									"monthly": 5300,
									"quarterly": 15900,
									"semiannually": 31800,
									"annually": 53000,
									"biennially": 95400,
									"triennially": 137800
								}, {
									"configid": "54",
									"optionname_num": "50",
									"optionname": "50M",
									"relid": "249",
									"monthly": 10100,
									"quarterly": 30300,
									"semiannually": 60600,
									"annually": 101000,
									"biennially": 181800,
									"triennially": 262600
								}, {
									"configid": "54",
									"optionname_num": "80",
									"optionname": "80M",
									"relid": "250",
									"monthly": 17300,
									"quarterly": 51900,
									"semiannually": 103800,
									"annually": 173000,
									"biennially": 311400,
									"triennially": 449800
								}, {
									"configid": "54",
									"optionname_num": "100",
									"optionname": "100M",
									"relid": "251",
									"monthly": 22100,
									"quarterly": 66300,
									"semiannually": 132600,
									"annually": 221000,
									"biennially": 397800,
									"triennially": 574600
								}]
							},
							"config_ip": {
								"id": "55",
								"gid": "27",
								"optionname": "IP\u6570",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "14",
								"hidden": "0",
								"sub": [{
									"configid": "55",
									"optionname_num": "0",
									"optionname": "1",
									"relid": "252",
									"monthly": 16,
									"quarterly": 48,
									"semiannually": 96,
									"annually": 160,
									"biennially": 288,
									"triennially": 416
								}]
							},
							"config_services": {
								"id": "56",
								"gid": "27",
								"optionname": "\u9644\u52a0\u670d\u52a1",
								"optiontype": "1",
								"qtyminimum": "0",
								"qtymaximum": "0",
								"order": "15",
								"hidden": "0",
								"sub": [{
									"configid": "56",
									"optionname": "\u57fa\u7840\u670d\u52a1",
									"relid": "256",
									"monthly": 0,
									"quarterly": 0,
									"semiannually": 0,
									"annually": 0,
									"biennially": 0,
									"triennially": 0
								}, {
									"configid": "56",
									"optionname": "\u6807\u51c6\u670d\u52a1",
									"relid": "257",
									"monthly": 160,
									"quarterly": 480,
									"semiannually": 960,
									"annually": 1600,
									"biennially": 2880,
									"triennially": 3520
								}, {
									"configid": "56",
									"optionname": "\u9ad8\u7ea7\u670d\u52a1",
									"relid": "258",
									"monthly": 480,
									"quarterly": 1440,
									"semiannually": 2880,
									"annually": 4800,
									"biennially": 8640,
									"triennially": 10560
								}]
							}
						}
						
						that.cpuOptions = data.config_cpu.sub
						that.ramOptions = data.config_ram.sub
						that.bwOptions = data.config_bw.sub
						
						// ip 测试数据
						that.ipOptions = [{
							annually: 160,
							biennially: 288,
							configid: "55",
							monthly: 16,
							optionname: "1",
							optionname_num: "0",
							quarterly: 48,
							relid: "252",
							semiannually: 96,
							triennially: 416
						},{
							annually: 170,
							biennially: 298,
							configid: "55",
							monthly: 16,
							optionname: "2",
							optionname_num: "0",
							quarterly: 48,
							relid: "253",
							semiannually: 96,
							triennially: 416
						},{
							annually: 160,
							biennially: 288,
							configid: "55",
							monthly: 16,
							optionname: "3",
							optionname_num: "0",
							quarterly: 48,
							relid: "254",
							semiannually: 96,
							triennially: 416
						}]
						
						that.activeIpId = '252'
						
						
						// 处理默认选中的cpu 和 内存
						
						if (that.form.areaActiveId === 0) {
						  if (that.activeCpuId === '199') {
						    that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[
						      3]]
						  } else if (that.activeCpuId === '200') {
						    that.childramOptions = [that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
						  } else if (that.activeCpuId === '201') {
						    that.childramOptions = [that.ramOptions[2], that.ramOptions[3], that.ramOptions[4]]
						  } else if (that.activeCpuId === '202') {
						    that.childramOptions = [that.ramOptions[3], that.ramOptions[4], that.ramOptions[5]]
						  } else if (that.activeCpuId === '203') {
						    that.childramOptions = [that.ramOptions[4], that.ramOptions[5], that.ramOptions[6]]
						  } else {
						    that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[
						      3]]
						  }
						} else {
						  if (that.activeCpuId === '271') {
						    that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[
						      3]]
						  } else if (that.activeCpuId === '272') {
						    that.childramOptions = [that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
						  } else if (that.activeCpuId === '273') {
						    that.childramOptions = [that.ramOptions[2], that.ramOptions[3], that.ramOptions[4]]
						  } else if (that.activeCpuId === '274') {
						    that.childramOptions = [that.ramOptions[3], that.ramOptions[4], that.ramOptions[5]]
						  } else if (that.activeCpuId === '275') {
						    that.childramOptions = [that.ramOptions[4], that.ramOptions[5], that.ramOptions[6]]
						  } else {
						    that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[
						      3]]
						  }
						}
						
						// 处理没有参数时  cpu 内存的默认选择
						
						if (that.activeCpuId === undefined) {
						  that.activeCpuId = that.cpuOptions[0].relid
						}
						
						if (that.activeRamId === undefined) {
						  that.activeRamId = that.childramOptions[0].relid
						}
						
						
						
						// 处理可选带宽
						let maxBwNum = 0 // 最大值
						data.config_bw.sub.forEach((item, index) => {
						  if (parseInt(item.optionname_num) > maxBwNum) {
						    maxBwNum = parseInt(item.optionname_num)
						  }
						})
						that.maxBwNum = maxBwNum
						let boundryNum = maxBwNum / data.config_bw.sub.length
						that.bwStep = boundryNum
						if (data !== undefined) {
						  that.bwMraks = {}
						  //  boundryNum * 0.5 是为了好看
						  data.config_bw.sub.forEach((item, index) => {
						    let num = (index + 1) * boundryNum
						    that.bwMraks[num] = item.optionname_num
						})
						
						that.bwMraks = JSON.parse(JSON.stringify(that.bwMraks))
						
						}
						let keysArr = Object.keys(that.bwMraks)
						
						// 处理没有参数值时的 带宽默认选择
						if (that.form.areaActiveId === 0) {
						  // 默认选择2M
						  that.bwNum = 12.5
						} else {
						  // 默认选择5M
						  that.bwNum = 22.22222222222222
						}
						
						// 原始配置信息赋值
						that.oldConfigInfo.activeCpuId = that.activeCpuId
						that.oldConfigInfo.activeRamId = that.activeRamId
						that.oldConfigInfo.activeIpId = that.activeIpId
						that.oldConfigInfo.cpuOptions = that.cpuOptions
						that.oldConfigInfo.ramOptions = that.ramOptions
						that.oldConfigInfo.ipOptions = that.ipOptions
						that.oldConfigInfo.childramOptions = that.childramOptions
						that.oldConfigInfo.bwMraks = that.bwMraks
						that.oldConfigInfo.bwNum = that.bwNum
						that.oldConfigInfo.bwOptions = data.config_bw.sub
						
					},
					 // 获取参数
					getparams: function() {
						// 这里都是测试数据 实际根据浏览后缀值获取
						let params = {
							areaActiveId:0,
							activeCpuId:'200',
							activeRamId: '205'
						}
						this.type = 'yunv4'
						this.activeCpuId = params.activeCpuId
						this.activeRamId = params.activeRamId
					},
					
					// 改变cpu选择
					handleClickChangeCpu:function(item) {
					  this.activeCpuId = item.relid
					  let that = this
					  if (that.form.areaActiveId === 0) {
					    if (that.activeCpuId === '199') {
					      that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
					    } else if (that.activeCpuId === '200') {
					      that.childramOptions = [that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
					    } else if (that.activeCpuId === '201') {
					      that.childramOptions = [that.ramOptions[2], that.ramOptions[3], that.ramOptions[4]]
					    } else if (that.activeCpuId === '202') {
					      that.childramOptions = [that.ramOptions[3], that.ramOptions[4], that.ramOptions[5]]
					    } else if (that.activeCpuId === '203') {
					      that.childramOptions = [that.ramOptions[4], that.ramOptions[5], that.ramOptions[6]]
					    }
					  } else {
					    if (that.activeCpuId === '271') {
					      that.childramOptions = [that.ramOptions[0], that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
					    } else if (that.activeCpuId === '272') {
					      that.childramOptions = [that.ramOptions[1], that.ramOptions[2], that.ramOptions[3]]
					    } else if (that.activeCpuId === '273') {
					      that.childramOptions = [that.ramOptions[2], that.ramOptions[3], that.ramOptions[4]]
					    } else if (that.activeCpuId === '274') {
					      that.childramOptions = [that.ramOptions[3], that.ramOptions[4], that.ramOptions[5]]
					    } else if (that.activeCpuId === '275') {
					      that.childramOptions = [that.ramOptions[4], that.ramOptions[5], that.ramOptions[6]]
					    }
					  }
					  that.activeRamId = that.childramOptions[0].relid
					
					},
					// 显示带宽数据
					handleBwNum:function() {
						let keysArr = Object.keys(this.bwMraks)
						let tip
						if(keysArr.length !== 0) {
						  keysArr.forEach((item) => {
						    if (Number(item).toFixed(11) === Number(this.bwNum).toFixed(11)) {
						      tip = this.bwMraks[item]
						    }
						  })
						}
						return tip
					}
				},
				mounted: function() {
					// 获取参数
					this.getparams()
					// 获取选配信息
					this.getConfigInfo()
				}

			})
		</script>
	</body>
</html>
